<template>
  <view class="snowy-form">
    <view class="step-view">
      <view class="step" :class="{ 'active': currentStep === 1, 'completed': currentStep > 1 }">
        <text class="step-number">1</text>
        <text class="step-text">选择设备类型</text>
      </view>
      <view class="step-line" :class="{ 'active': currentStep > 1 }"></view>
      <view class="step" :class="{ 'active': currentStep === 2 }">
        <text class="step-number">2</text>
        <text class="step-text">填写预约信息</text>
      </view>
    </view>
    <view v-if="currentStep === 1" class="device-type-selection">
      <view class="type-grid">
        <view
          v-for="(item, index) in typeOptions"
          :key="index"
          class="type-item"
          :class="{ 'selected': formData.type === item.value }"
          @click="selectDeviceType(item.value)"
          >
          <text class="type-name">{{ item.text }}</text>
        </view>
      </view>
      <tui-button margin="50rpx 0"
                  :preventClick="true"
                  :shadow="true"
                  :disabled="!formData.type"
                  @click="goToNextStep">下一步</tui-button>
    </view>

    <view v-if="currentStep === 2">
      <uni-forms ref="formRef"
                 :model="formData"
                 label-position="top"
                 :rules="rules"
                 validate-trigger="blur"
                 labelWidth="auto">
        <uni-forms-item label="预约日期"
                        name="reservationDate"
                        :required="true"
                        :rules="[{ required: true, errorMessage: '请选择预约日期' }]">
          <uni-datetime-picker
              type="date"
              v-model="formData.reservationDate"
              :start="startDate"
              :end="endDate"
              :disableBefore="startDate"
              @change="handleDateChange"
              :clear-icon="false"
              :border="true"
              placeholder="请选择预约日期"
          />
        </uni-forms-item>
        <uni-forms-item label="预约时间段"
                        name="timeSlots"
                        :required="true"
                        :rules="[{ required: true, errorMessage: '请选择至少一个预约时间段' }]">
          <view class="time-slots-container">
            <view class="time-slots-list">
              <view
                  v-for="(slot, index) in timeSlotOptions"
                  :key="index"
                  class="time-slot-item"
                  :class="{ 'selected': isTimeSlotSelected(formData.reservationDate, slot.value) }"
                  @click="toggleTimeSlot(slot.value)"
                  :disabled="!formData.reservationDate"
              >
                <text>{{ slot.text }}</text>
              </view>
            </view>
          </view>
        </uni-forms-item>
      
        <uni-forms-item label="选择设备">
          <view class="device-selection-container">
            <view class="device-list">
              <view class="device-item" v-for="(device, index) in availableDevices" :key="index">
                <view class="device-info" :class="{ 'device-disabled': device.disabled, 'device-selected': device.selected }" @click="!device.disabled && handleDeviceSelect(device)">
                  <text class="device-name">{{ device.text }}</text>
                </view>
              </view>
            </view>
          </view>
        </uni-forms-item>
        <!-- 已选择的日期和时间段显示 -->
        <uni-forms-item label="已选择的预约时间" v-if="hasSelectedDateTimeSlots">
          <view class="selected-date-time-slots">
            <view class="selected-date-group" v-for="(dateSlots, date) in dateTimeSlotMap" :key="date">
              <view class="selected-date-header">{{ date }}</view>
              <view class="selected-time-slots">
                <view class="selected-slot-item" v-for="(record, index) in dateSlots" :key="index">
                  <text>{{ getTimeSlotText(record.timeSlot) }} - {{ record.deviceName }}</text>
                  <text class="remove-btn" @click.stop="removeSelectedRecord(date, index)">×</text>
                </view>
              </view>
            </view>
          </view>
        </uni-forms-item>
        
        <uni-forms-item label="预约用户名称"
                        name="userName"
                        :required="true"
                        :rules="[{ required: true, errorMessage: '请输入预约用户' }]">
          <uni-easyinput v-model="formData.userName"
                         placeholder="请输入预约用户"
                         :disabled=true ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="使用目的"
                        name="purpose"
                        :required="false"
                        :rules="[{ required: false, errorMessage: '请输入使用目的' }]">
          <uni-easyinput v-model="formData.purpose"
                         placeholder="请输入使用目的"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="备注"
                        name="remark"
                        :required="false"
                        :rules="[{ required: false, errorMessage: '请输入备注' }]">
          <uni-easyinput v-model="formData.remark"
                         placeholder="请输入备注"></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
      <view class="button-group">
        <tui-button 
          :preventClick="true"
          :shadow="true"
          type="gray"
          class="custom-button prev-button"
          @click="goToPrevStep">上一步</tui-button>
        <tui-button
          :preventClick="true"
          :shadow="true"
          type="primary"
          class="custom-button submit-button"
          @click="submit">提交</tui-button>
      </view>
    </view>
  </view>
</template>

<script setup name="userReservationForm">
import store from '@/store/index.js'
import { onLoad } from "@dcloudio/uni-app"
import userReservationApi from '@/api/biz/user-reservation-api'
import deviceReservationApi from '@/api/biz/device-reservation-api'
import deviceInfoApi from "@/api/biz/device-info-api";
import bizDictApi from "@/api/biz/biz-dict-api";
import { reactive, ref, getCurrentInstance, watch, computed } from "vue"
import CallbackState from "@/enum/callback-state"
import dayjs from "dayjs"

const { proxy } = getCurrentInstance()
const formRef = ref()
const formData = ref({})
// 常用正则规则大全：https://any86.github.io/any-rule/
// 去pages/biz/user/form.vue中寻找示例
const rules = reactive({})

const currentStep = ref(1) // 当前步骤，1: 选择设备类型, 2: 填写预约信息

const typeOptions = ref([])
const availableDevices = ref([])
const getTypeOptions = () => {
  const dictList = uni.$snowy.tool.dictList('DEVICE_TYPE')
  if (dictList && dictList.length > 0) {
    typeOptions.value = dictList
  } else {
    bizDictApi.treeByDict({ dictName: 'DEVICE_TYPE' })
        .then(res => {
          typeOptions.value = res.map(item => ({
            text: item.dictLabel,
            value: item.dictValue
          }))
        })
        .catch(() => {
          uni.showToast({ title: '获取设备类型失败', icon: 'none' })
        })
  }
}

const getTypeImage = (type) => { //弃用先
  const imageMap = {
    '1': '/static/images/device-type-1.png',
    '2': '/static/images/device-type-2.png',
    '3': '/static/images/device-type-3.png',
  }
  return imageMap[type] || '/static/images/default-device.png'
}

const selectDeviceType = (type) => {
  formData.value.type = type
}

const goToNextStep = () => {
  if (!formData.value.type) {
    uni.showToast({ title: '请选择设备类型', icon: 'none' })
    return
  }
  currentStep.value = 2
  if (formData.value.type) {
    getDevicesByType(formData.value.type)
  }
}

const goToPrevStep = () => {
  currentStep.value = 1
}

const getTimeSlotOptions = (param, callback) => callback({ state: CallbackState.SUCCESS, data: timeSlotOptions.value })
const deviceNameOptions = ref([]) // 设备名称选项
const timeSlotOptions = ref([]) // 将用于显示给用户的、可能被过滤的时间段
const allTimeSlots = ref([]) // 用于存储从API获取的全部时间段
const selectedTimeSlots = ref([]) // 存储用户选择的多个时间段

// 日期禁用相关
const startDate = ref(dayjs().format('YYYY-MM-DD')) // 今天
const endDate = ref(dayjs().add(6, 'day').format('YYYY-MM-DD')) // 今天后的第6天

const dateTimeSlotMap = ref({})

// type: "正念冥想"
// userName: "谭皓晋"
// reservation：
// [
//   {reservationDate1:
//      [{timeSlot: "9:00-10:00", deviceName: "正念冥想设备-1", deviceId: "1916058362040119297"},
//       {timeSlot: "10:00-11:00", deviceName: "正念冥想设备-1", deviceId: "1916058362040119297"}
//      ]
//   },
//   {reservationDate2:
//      [{timeSlot: "9:00-10:00", deviceName: "正念冥想设备-1", deviceId: "1916058362040119297"},
//       {timeSlot: "10:00-11:00", deviceName: "正念冥想设备-1", deviceId: "1916058362040119297"}
//      ]
//   }
// ]

const hasSelectedDateTimeSlots = computed(() => {
  return Object.keys(dateTimeSlotMap.value).length > 0
})


// 处理日期变化
const handleDateChange = (newDate) => {
  if (newDate) { // 这个b组件不支持禁用其中某些日期，只能通过提示框提示了
    const selectedDay = dayjs(newDate).day()
    if (selectedDay === 0 || selectedDay === 6) {
      uni.showToast({ title: '周末暂时不可预约，请重新选择', icon: 'none' })
      setTimeout(() => {
        formData.value.reservationDate = ''
      }, 100)
      return
    }

    updateDisplayedTimeSlots()
  }
}

const isTimeSlotSelected = (date, timeSlotValue) => {
  if (!date) return false

  const dateSlots = dateTimeSlotMap.value[date] || []
  return dateSlots.some(record => record.timeSlot === timeSlotValue)
}

const toggleTimeSlot = (timeSlotValue) => {
  if (!formData.value.reservationDate) {
    uni.showToast({ title: '请先选择预约日期', icon: 'none' })
    return
  }

  const date = formData.value.reservationDate

  if (isTimeSlotSelected(date, timeSlotValue)) {
    const dateSlots = dateTimeSlotMap.value[date] || []
    const index = dateSlots.findIndex(record => record.timeSlot === timeSlotValue)
    if (index !== -1) {
      dateSlots.splice(index, 1)
      if (dateSlots.length === 0) {
        delete dateTimeSlotMap.value[date]
      } else {
        dateTimeSlotMap.value[date] = dateSlots
      }
    }
  } else {
    //showDeviceSelectionDialog(date, timeSlotValue)
    showDeviceSelection(date,timeSlotValue)
  }
}
const handleDeviceSelect = (device) =>{
  device.selected = !device.selected;
  // 检查设备是否可用
  if (device && !device.disabled) {
    // 确保dateTimeSlotMap中存在当前日期的条目
    if (!dateTimeSlotMap.value[device.date]) {
      dateTimeSlotMap.value[device.date] = [];
    }
    // 将设备信息添加到dateTimeSlotMap中
    /*dateTimeSlotMap.value[device.date].push({
      timeSlot: device.timeSlotValue,
      deviceName: device.value,
      deviceId: device.deviceId
    });*/
    // 检查是否已存在相同的元素
    const isExists = dateTimeSlotMap.value[device.date].some(item => 
      item.timeSlot === device.timeSlotValue && 
      item.deviceId === device.deviceId
    );
    if(isExists){
       uni.showToast({ title: '该设备已选择，请勿重复选择', icon: 'none' });
    }else  {
      dateTimeSlotMap.value[device.date].push({
        timeSlot: device.timeSlotValue,
        deviceName: device.value,
        deviceId: device.deviceId
      });
    }
  } else if (device && device.disabled) {
    // 设备不可用时显示提示
    uni.showToast({ title: '该设备已被预约，请选择其他设备', icon: 'none' });
  }
}

const showDeviceSelection = (date, timeSlotValue) => {
  uni.showLoading({ title: '加载设备中...' })

  const params = {
    type: formData.value.type,
    reservationDate: date,
    timeSlot: timeSlotValue,
    id: formData.value.id || ''
  }

  deviceReservationApi.getReservedDevices(params)
    .then(reservedDevices => {
      return deviceInfoApi.deviceInfoListByType({ type: formData.value.type })
        .then(allDevices => {
          if (allDevices && allDevices.length > 0) {
             availableDevices.value = allDevices.map(device => {
              const isReserved = reservedDevices && reservedDevices.includes(device.name)
              return {
                text: device.name + (isReserved ? ' (已预约)' : ''),
                value: device.name,
                deviceId: device.id,
                disabled: isReserved,
                date:date,
                timeSlotValue:timeSlotValue
              }
            })
            //修改成将数组展示在界面上而不是弹窗中
            uni.hideLoading()

            /*uni.showActionSheet({
              itemList: availableDevices.map(device => device.text),
              success: function(res) {
                const selectedDevice = availableDevices[res.tapIndex]
                if (selectedDevice && !selectedDevice.disabled) {
                  if (!dateTimeSlotMap.value[date]) {
                    dateTimeSlotMap.value[date] = []
                  }
                  dateTimeSlotMap.value[date].push({
                    timeSlot: timeSlotValue,
                    deviceName: selectedDevice.value,
                    deviceId: selectedDevice.deviceId
                  })
                } else if (selectedDevice && selectedDevice.disabled) {
                  uni.showToast({ title: '该设备已被预约，请选择其他设备', icon: 'none' })
                }
              },
              fail: function() {
                // 用户取消选择
              }
            })*/
          } else {
            uni.hideLoading()
            uni.showToast({ title: '没有可用设备', icon: 'none' })
          }
        })
    })
    .catch(error => {
      uni.hideLoading()
      uni.showToast({ title: '获取设备失败', icon: 'none' })
      console.error('获取设备失败:', error)
    })
}
const showDeviceSelectionDialog = (date, timeSlotValue) => {
  uni.showLoading({ title: '加载设备中...' })

  const params = {
    type: formData.value.type,
    reservationDate: date,
    timeSlot: timeSlotValue,
    id: formData.value.id || ''
  }

  deviceReservationApi.getReservedDevices(params)
    .then(reservedDevices => {
      return deviceInfoApi.deviceInfoListByType({ type: formData.value.type })
        .then(allDevices => {
          if (allDevices && allDevices.length > 0) {
            const availableDevices = allDevices.map(device => {
              const isReserved = reservedDevices && reservedDevices.includes(device.name)
              return {
                text: device.name + (isReserved ? ' (已预约)' : ''),
                value: device.name,
                deviceId: device.id,
                disabled: isReserved
              }
            })

            uni.hideLoading()

            uni.showActionSheet({
              itemList: availableDevices.map(device => device.text),
              success: function(res) {
                const selectedDevice = availableDevices[res.tapIndex]
                if (selectedDevice && !selectedDevice.disabled) {
                  if (!dateTimeSlotMap.value[date]) {
                    dateTimeSlotMap.value[date] = []
                  }
                  dateTimeSlotMap.value[date].push({
                    timeSlot: timeSlotValue,
                    deviceName: selectedDevice.value,
                    deviceId: selectedDevice.deviceId
                  })
                } else if (selectedDevice && selectedDevice.disabled) {
                  uni.showToast({ title: '该设备已被预约，请选择其他设备', icon: 'none' })
                }
              },
              fail: function() {
                // 用户取消选择
              }
            })
          } else {
            uni.hideLoading()
            uni.showToast({ title: '没有可用设备', icon: 'none' })
          }
        })
    })
    .catch(error => {
      uni.hideLoading()
      uni.showToast({ title: '获取设备失败', icon: 'none' })
      console.error('获取设备失败:', error)
    })
}

const removeSelectedRecord = (date, index) => {
  const dateSlots = dateTimeSlotMap.value[date]
  if (dateSlots && dateSlots.length > index) {
    dateSlots.splice(index, 1)
    if (dateSlots.length === 0) {
      delete dateTimeSlotMap.value[date]
    } else {
      dateTimeSlotMap.value[date] = dateSlots
    }
  }
}

const removeSelectedTimeSlot = (index) => {
  selectedTimeSlots.value.splice(index, 1)

  formData.value.deviceName = undefined

  if (formData.value.type && selectedTimeSlots.value.length > 0) {
    updateDeviceOptions()
  } else {
    deviceNameOptions.value = []
  }
}

const getTimeSlotText = (timeSlotValue) => {
  const slot = timeSlotOptions.value.find(slot => slot.value === timeSlotValue)
  return slot ? slot.text : timeSlotValue
}

watch(() => formData.value.type, (newType, oldType) => {
  if (newType !== oldType) {
    handleTypeChange(newType);
  }
})

const handleTypeChange = (value) => {
  formData.value.deviceName = undefined
  if (value) {
    if (formData.value.reservationDate && selectedTimeSlots.value.length > 0) {
      updateDeviceOptions()
    } else {
      getDevicesByType(value)
    }
  } else {
    deviceNameOptions.value = []
  }
}

// 根据设备类型获取设备列表
const getDevicesByType = (type) => {
  deviceInfoApi
      .deviceInfoListByType({ type: type })
      .then((res) => {
        if (res) {
          deviceNameOptions.value = res.map((item) => {
            return {
              text: item.name,
              value: item.name,
              deviceId: item.id,
              disable: false
            }
          })
        } else {
          deviceNameOptions.value = []
        }
      })
      .catch(() => {
        deviceNameOptions.value = []
      })
}

// 更新设备选项，标记已预约的设备
const updateDeviceOptions = () => {
  if (!formData.value.type || !formData.value.reservationDate || selectedTimeSlots.value.length === 0) {
    return
  }
  uni.showLoading({
    title: '加载设备中...'
  })
  const checkPromises = selectedTimeSlots.value.map(timeSlot => {
    const params = {
      type: formData.value.type,
      reservationDate: formData.value.reservationDate,
      timeSlot: timeSlot,
      id: formData.value.id || ''
    }

    return deviceReservationApi.getReservedDevices(params)
  })

  // 先获取该类型的所有设备
  deviceInfoApi
      .deviceInfoListByType({ type: formData.value.type })
      .then((allDevices) => {
        if (allDevices && allDevices.length > 0) {
          Promise.all(checkPromises)
              .then((results) => {
                const allReservedDevices = new Set()
                results.forEach(reservedDevices => {
                  if (reservedDevices && reservedDevices.length > 0) {
                    reservedDevices.forEach(device => allReservedDevices.add(device))
                  }
                })

                deviceNameOptions.value = allDevices.map((device) => {
                  const isReserved = allReservedDevices.has(device.name)
                  return {
                    text: device.name + (isReserved ? ' (已预约)' : ''),
                    value: device.name,
                    deviceId: device.id,
                    disable: isReserved
                  }
                })

                if (!formData.value.id && formData.value.deviceName && allReservedDevices.has(formData.value.deviceName)) {
                  formData.value.deviceName = undefined
                  uni.showToast({ title: '该设备在所选时间段已被预约，请重新选择', icon: 'none' });
                }

                uni.hideLoading()
              })
              .catch(() => {
                deviceNameOptions.value = allDevices.map((device) => {
                  return {
                    text: device.name,
                    value: device.name,
                    deviceId: device.id,
                    disable: false
                  }
                })
                uni.hideLoading()
              })
        } else {
          deviceNameOptions.value = []
          uni.hideLoading()
        }
      })
      .catch(() => {
        deviceNameOptions.value = []
        uni.hideLoading()
      })
}

// 更新并过滤显示的时间段选项
const updateDisplayedTimeSlots = () => {
  if (!allTimeSlots.value.length) {
    timeSlotOptions.value = []
    return
  }
  if (!formData.value.reservationDate) {
    timeSlotOptions.value = [...allTimeSlots.value]
    return
  }

  const selectedDate = dayjs(formData.value.reservationDate).startOf('day')
  const today = dayjs().startOf('day')

  if (selectedDate.isSame(today, 'day')) {
    // 如果选择的是今天
    const now = dayjs()
    timeSlotOptions.value = allTimeSlots.value.filter((slot) => {
      const startTimeStr = slot.value.split('-')[0]
      const [hour, minute] = startTimeStr.split(':').map(Number)
      const slotStartDateTime = dayjs().hour(hour).minute(minute).second(0).millisecond(0)
      return now.isBefore(slotStartDateTime)
    })

    selectedTimeSlots.value = selectedTimeSlots.value.filter(timeSlot => {
      return timeSlotOptions.value.some(option => option.value === timeSlot)
    })

    if (selectedTimeSlots.value.length === 0) {
      uni.showToast({ title: '原选择的时间段已过或不可用，请重新选择', icon: 'none' })
      deviceNameOptions.value = []
      formData.value.deviceName = undefined
    }
  } else {
    timeSlotOptions.value = [...allTimeSlots.value]
  }
}

// 处理设备选择变化
const handleDeviceChange = (value) => {
  if (value) {
    const selectedDevice = deviceNameOptions.value.find(device => device.value === value)
    if (selectedDevice && selectedDevice.disable) {
      uni.showToast({ title: '该设备已被预约，请选择其他设备', icon: 'none' })
      setTimeout(() => {
        formData.value.deviceName = undefined
      }, 100)
    }
  }
}

const submit = () => {
  if (Object.keys(dateTimeSlotMap.value).length === 0) {
    uni.showToast({ title: '请至少选择一个预约时间段', icon: 'none' })
    return
  }
  console.log(formData.value)
  console.log(dateTimeSlotMap.value)

  // 创建所有预约请求
  const allPromises = []

  uni.showLoading({
    title: '预约中...',
    mask: true
  })

  Object.entries(dateTimeSlotMap.value).forEach(([date, records]) => {
    records.forEach(record => {
      const reservationData = {
        type: formData.value.type,
        userName: formData.value.userName,
        purpose: formData.value.purpose,
        remark: formData.value.remark,
        reservationDate: date,
        timeSlot: record.timeSlot,
        deviceName: record.deviceName,
        deviceId: record.deviceId
      }

      const promise = deviceReservationApi.deviceReservationSubmitForm(reservationData, true)
          .then(result => {
            console.log(`预约成功: ${date} ${record.timeSlot} ${record.deviceName}`, result)
            return{
              success: true,
              date: date,
              timeSlot: record.timeSlot,
              deviceName: record.deviceName,
              result: result
            }
          })
          .catch(error => {
            console.error(`预约失败: ${date} ${record.timeSlot} ${record.deviceName}`, error)
            return {
              success: false,
              date: date,
              timeSlot: record.timeSlot,
              deviceName: record.deviceName,
              error: error
            }
          })
      allPromises.push(promise)
    })
  })
  Promise.all(allPromises)
      .then(results => {
        uni.hideLoading()

        uni.showToast({
          title: '预约成功',
          icon: 'success',
          duration: 2000
        })

        setTimeout(() => {
          uni.$emit('formBack', {
            data: results
          })
          uni.navigateBack({
            delta: 1
          })
        }, 1500)
      })
      .catch(error => {
        uni.hideLoading()

        uni.showToast({
          title: '预约失败，请重试',
          icon: 'none',
          duration: 2000
        })

        console.error('预约失败:', error)
      })
}

onLoad((option) => {
  getTypeOptions()

  // 新增模式
  if(!option.id){
    formData.value = {
      reservations: []
    }

    bizDictApi.treeByDict({ dictName: 'TIME_SLOT' }).then((res) => {
      allTimeSlots.value = res.map((item) => {
        return {
          text: item.dictLabel,
          value: item.dictValue
        }
      })
      timeSlotOptions.value = [...allTimeSlots.value]
    }).catch(error => {
      console.error('获取时间段失败:', error)
      uni.showToast({ title: '获取时间段失败', icon: 'none' })
    })

    // 自动填入当前用户名
    const userInfo = store.getters.userInfo

    if (userInfo && userInfo.name) {
      formData.value.userName = userInfo.name
    } else {
      console.error('未获取到用户名')
    }

    return
  }

  // 编辑模式
  userReservationApi.userReservationDetail({
    id: option.id
  }).then(data => {
    formData.value = data
    // 如果是编辑模式，将时间段添加到selectedTimeSlots
    if (data.timeSlot) {
      selectedTimeSlots.value = [data.timeSlot]
    }
    // 编辑模式直接进入第二步
    currentStep.value = 2
  })
})
</script>

<style lang="scss" scoped>
.step-view {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  padding: 20px 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 8px;
}

.step.active .step-number {
  background-color: #2979ff;
  color: white;
}

.step.completed .step-number {
  background-color: #4cd964;
  color: white;
}

.step-text {
  font-size: 14px;
  color: #666;
}

.step.active .step-text {
  color: #2979ff;
  font-weight: bold;
}

.step.completed .step-text {
  color: #4cd964;
}

.step-line {
  flex: 1;
  height: 2px;
  background-color: #f0f0f0;
  margin: 0 15px 8px;
}

.step-line.active {
  background-color: #4cd964;
}

.device-type-selection {
  padding: 20px 0;
}

.type-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.type-item {
  width: calc(50% - 10px);
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
}

.type-item.selected {
  background-color: #e6f1ff;
  border: 2px solid #2979ff;
}

.type-image {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

.type-name {
  font-size: 16px;
  font-weight: bold;
}

.button-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 50rpx 30rpx;
  box-sizing: border-box;
} 

.time-slots-container {
  width: 100%;
}

.time-slots-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.time-slot-item {
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.time-slot-item.selected {
  background-color: #2979ff;
  color: white;
}

.selected-time-slots {
  margin-top: 15px;
}

.selected-date-group {
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
}

.selected-date-header {
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.selected-slot-item {
  display: flex;
  align-items: center;
  background-color: #e6f1ff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.remove-btn {
  margin-left: 5px;
  color: #ff5a5f;
  font-weight: bold;
  font-size: 14px;
}
.button-group {
        display: flex;
        justify-content: space-between;
        gap: 10px;
      }
      
.custom-button {
  flex: 1;
  border-radius: 8px;
  padding: 12px 0;
  transition: all 0.3s ease;
}

.icon {
  margin-right: 6rpx;
}
.prev-button:hover {
  background-color: #e0e0e0;
}

.submit-button:hover {
  opacity: 0.9;
}
.device-selection-container {
  padding: 10rpx;
}
.device-selected {
  background-color: #007aff; /* 蓝色背景 */
  color: white; /* 白色文字，提高对比度 */
}
.device-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.device-item {
  flex: 1 1 calc(50% - 16rpx);
  min-width: 200rpx;
}

.device-info {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.device-disabled {
  background-color: #f9f9f9;
  opacity: 0.6;
  cursor: not-allowed;
}

.device-name {
  font-size: 28rpx;
  color: #333333;
}

.device-disabled .device-name {
  color: #999999;
}

.device-select-mark {
  color: #007aff;
  font-size: 32rpx;
  font-weight: bold;
}
</style>